<template>
	<view v-if="is_show" class="container">
		<form @submit="bindSave">
			<view class="tui-form">
				<view class="diy-title">
					注册
				</view>
				<diyfields :value="registerfield"  @complete="result" :current="current"></diyfields>
				
				<view class="tui-cell-text">
				注册代表同意
					<view class="tui-color-primary" hover-class="tui-opcity" :hover-stay-time="150" @tap="showagreementAlert">入驻协议、隐私政策</view>
					<tui-modal :show="showagreement" custom>
						<view class="tui-modal-custom">
							<scroll-view :style="'height:'+(height-160)+'px'" scroll-y="true">
								<view class="tui-modal-custom-text">
									<rich-text :nodes="agreement.content"></rich-text>
								</view>
							</scroll-view>
							<tui-button height="72rpx" :size="28" type="primary" shape="circle"
								@click="hideagreementAlert">我已阅读并同意</tui-button>
						</view>
					</tui-modal>
				</view>
				<view class="tui-btn-box">
					<tui-button type="blue" height="75rpx" shape="circle" v-if="current == 1" @click="prevClick">上一步</tui-button>
				</view>
				<view class="tui-btn-box">
					<tui-button type="blue" height="75rpx" shape="circle" v-if="current == 0"  @click="nextClick">下一步</tui-button>
				</view>
				<view class="tui-btn-box">
					<tui-button formType="submit" type="blue" height="75rpx" shape="circle" v-if="current == 1">确认</tui-button>
				</view>
			</view>
		</form>
		<!-- <view class="tui-form">
			<view class="tui-btn-box">
				<tui-button type="danger" open-type="contact" height="88rpx" shape="circle">联系客服</tui-button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import diyfields from "@/components/views/diyfields/diyfields"
	export default {
		components: {
			diyfields
		},
		computed: {},
		data() {
			return {
				registerfield: [],
				is_show: 0,
				is_submitaudit: 1,
				ptype:"",
				agreement: {
					content:''
				},
				showagreement: false,
				width: 0,
				height: 0,
				current: 0
			};
		},
		onLoad: function(e) {
			let _this = this;
			if (e.ptype) {
				_this.ptype = e.ptype;
			}
			console.log(_this.ptype)
			_this.$request.get('registerfield.list', {
				ptype: _this.ptype,
				samkey: (new Date()).valueOf()
			}).then(res => {
				if (res.errno == 0) {
					// if (res.is_submit == 1) {
					// 	uni.reLaunch({
					// 		url: "/pages/login/success?ptype=" + _this.ptype
					// 	});
					// } else {
						_this.is_show = 1;
						_this.registerfield = res.data;
					// }
				}
				console.log(_this.registerfield)
			});
			
			_this.$request.post('Agreement.index', {
				code: _this.ptype +'join'
			}).then(res => {
				if (res.errno == 0) {
					_this.agreement = res.data;
				}
			});
			
			uni.getSystemInfo({
				success: res => {
					this.width = res.windowWidth;
					this.height = res.windowHeight;
				}
			});
		},
		onShow() {},
		methods: {
			nextClick() {
				this.current = 1
			},
			prevClick() {
				this.current = 0
			},
			result: function(e) {
				this.registerfield = e.registerfield;
			},
			bindSave: function(e) {
				var _this = this;
				_this.$request.post('registerfield.update', {
					registerfield: JSON.stringify(_this.registerfield)
				}).then(res => {
					if (res.errno != 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						return;
					} else {
						//console.log(res.errno);
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							//是否显示取消按钮 
							success: function(res) {
								uni.navigateTo({
									url: "/pages/login/success?ptype=" + _this.ptype
								});
							}
						});
					}
				});
			},
			showagreementAlert() {
				this.showagreement = true;
			},
			hideagreementAlert() {
				this.showagreement = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tui-list-cell {
		width: 100%;
		color: $uni-text-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.tui-avatar {
		width: 130rpx;
		height: 130rpx;
		display: block;
	}

	.uni-list {
		width: 100%;
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.ptypebut {
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		margin-bottom: 10rpx;
	}

	.checkboxbox {
		padding: 20rpx;
	}

	.container {
		width: 690rpx;
		margin: 100rpx auto 0;
		padding: 30rpx 24rpx 80rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
		.diy-title{
			text-align: center;
			font-size: 36rpx;
		}
		.tui-page-title {
			width: 100%;
			font-size: 48rpx;
			font-weight: bold;
			color: $uni-text-color;
			line-height: 42rpx;
			padding: 110rpx 40rpx 40rpx 40rpx;
			box-sizing: border-box;
		}

		.tui-form {
			.tui-view-input {
				width: 100%;
				box-sizing: border-box;
				padding: 0 0rpx;

				.tui-cell-input {
					width: 100%;
					display: flex;
					align-items: center;
					padding-top: 48rpx;
					padding-bottom: $uni-spacing-col-base;

					input {
						flex: 1;
						padding-left: $uni-spacing-row-base;
					}

					.tui-icon-close {
						margin-left: auto;
					}

					.tui-btn-send {
						width: 156rpx;
						text-align: right;
						flex-shrink: 0;
						font-size: $uni-font-size-base;
						color: $uni-color-primary;
					}

					.tui-gray {
						color: $uni-text-color-placeholder;
					}

					.tui-textarea {
						width: 100%;
						height: 300rpx;
						font-size: 28rpx;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						background-color: #fff;
					}
				}
			}

			.tui-cell-text {
				width: 100%;
				padding: 40rpx $uni-spacing-row-lg;
				box-sizing: border-box;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				display: flex;
				align-items: center;

				.tui-color-primary {
					color: $uni-color-primary;
					padding-left: $uni-spacing-row-sm;
				}
			}

			.tui-btn-box {
				width: 80%;
				padding: 0 $uni-spacing-row-lg;
				box-sizing: border-box;
				margin: 20rpx auto 0;
			}
		}
	}
</style>
